<template>
  <div class="collapse-component">
    <el-collapse 
      v-model="activeNames" 
      :accordion="datas.accordion"
      :style="{ 
        borderRadius: datas.borderRadius,
        width: datas.width,
        height: datas.height
        }"
    >
      <el-collapse-item 
        v-for="(item, index) in datas.items" 
        :key="index" 
        :title="item.title" 
        :name="(index + 1).toString()"
      >
        {{ item.content }}
      </el-collapse-item>
    </el-collapse>
    
  </div>
</template>

<script>
export default {
  name: 'collapse',
  props: {
    datas: {
      type: Object,
      required: true
    },
  },
  data() {
    return {
      activeNames: this.datas.activeNames || ['1']
    }
  },
  watch: {
    'datas.activeNames': {
      handler(newVal) {
        this.activeNames = newVal;
      },
      immediate: true
    },
    activeNames: {
      handler(newVal) {
        this.datas.activeNames = newVal;
      }
    }
  }
}
</script>

<style scoped lang="less">
.collapse-component {
  width: 100%;
  height: 100%;
}
</style>
